/* @removeInDist
  This file is automatically imported into everything .pcss files.  
  I recommend declaring all common sass-like variables and mixins here.
*/

$layoutWidth: 1728px;
$minLayoutWidth: 320px;
$mainFontSize: 16px;
$minFontSize: 12px;

@custom-media --is-large-layout (width > $layoutWidth);
@custom-media --is-layout-width (1024px <= width <= $layoutWidth);
@custom-media --is-small-pc (769px <= width <= 1024px);
@custom-media --is-tablet (426px <= width <= 769px);
@custom-media --is-mobile (width <= 426px);

@define-mixin size $width, $height: $width {
  width: $width;
  height: $height;
}

@define-mixin hide {
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

@define-mixin show {
  pointer-events: all;
  overflow: auto;
  opacity: 1;
}

@define-mixin image-fit $object-fit {
  width: 100%;
  height: 100%;
  object-fit: $object-fit;
}

@define-mixin absolute $inset, $z-index: 0 {
  position: absolute;
  z-index: $z-index;
  inset: $inset;
}
